<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Font-face</title>
    <style>

        /* 
            我们通过font-family指定字体时，字体可用的前提是用户的计算机中装有该字体
                如果我们想使用一些用户计算机没有安装的特殊字体，可以通过font-face来指定字体

            像下边这种字体的用法，一般情况下是不推荐使用的
                首先，我们通过服务器为用户提供字体，用户需要先下载字体，然后才能使用字体
                    下载需要花费时间，影响用户的体验
                其次，字体通常都会有版权问题，如果使用了一些未经授权的字体会存在法律风险
        
        */
        @font-face {
            font-family: test ;
            src: url(./font.ttf);
        }


        .box1{
            font-size: 40px;
            font-family: test;
        }
    </style>
</head>
<body>

    <div class="box1">
        Hello Hello how are you! 今天天气真不错！
    </div>
    
</body>
</html>